<template>
  <div class="container index ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }"  :modules="modules"  :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{backgroundImage: `url(${item.pic_url})`}" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{item.title}}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{item.brief}}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>

              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="bodyBox">
      <div class="contain wrapBox">
        <h3 class="title">项目区位图</h3>
        <div class="info-head">
          <ul class="info-wrapper dis-flex flex-x-center">
            <li class="info-slide w-s one-line-hide" v-for="item,index in projectData.list" @mouseover="infoItemMouseOverHandle(index)" :class="{active:currentIndex === index}">{{item.title}}</li>
          </ul>
        </div>
        <div class="info-container">
          <template v-for="item,index in projectData.list">
            <el-row :gutter="24" v-if="currentIndex === index" class=" animate__animated animate__fadeInUp fadeInUp20">
              <el-col :span="11" :xs="24">
                <div class="left">
                  <div class="classic-l">
                    <div class="classic_div">
                      <div class="classic_logo flex-y">
                        <div class="fnt_20 mb-5">project name</div>
                        <div class="fnt_40">{{item.title}}</div>
                      </div>
                      <p class="classic_p fnt_20">{{item.brief}}</p>
                      <div class="classic_list flex-row-bet-center">
                        <div class="classicItem flex-y flex-y-center" v-for="itemf in item.label_info">
                          <img class="img" :src="itemf.icon" alt="">
                          <p class="fnt_20"> {{itemf.title}} </p>
                        </div>
                        

                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="13" :xs="24">
                <NuxtLink :to="{path: `/project/${item.project_id}`}"  class="right">
                  <img class="img" :src="item.image_url" />
                </NuxtLink>
              </el-col>
            </el-row>
          </template>

        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
const data = await serverRequest.get('project/index');
/**
 * 头部设置
 */
const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-景观` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})
const projectData = await serverRequest.get('project/lists');

const pageData = reactive({
  navigation: [
    {
      name: "区位",
      value: "/location",
      id: 1,
    },
    {
      name: "景观",
      value: "/landscape",
      id: 2,
    },
    {
      name: "品质",
      value: "/intellectualProperty/index",
      id: 3,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    },
    
    
  ],
  currentIndex:0
  
});
const { navigation,currentIndex} = toRefs(pageData);
function infoItemMouseOverHandle(index) {
  pageData.currentIndex = index;
}

// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}

</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
